<template>
  <scroll class="wait_order__container">
    <div>
      <div class="order__group base-padding">
        <div class="cont">
          <p>{{ driverState }}</p>
          <p>预估等待 20分钟</p>
        </div>
      </div>
      <h1>{{ driverStateText }}</h1>
      <h5>{{ driverStateDesc }}</h5>
      <div class="load-container" ref="loadContainer" :style="loadWidthSly">
        <sl-loading-canvas :width="loadWidth"/>
        <!--<sl-loading-svg :width="loadWidth" padding="20"></sl-loading-svg>-->
        <div class="time__cont">
          <p>已等待</p>
          <span>{{ timeHandle === false ? '' :  timeHandle}}</span>
        </div>
      </div>
      <div class="close-btn base-padding">
        <x-button @click.native="onClickCloseOrder">取消订单</x-button>
      </div>
    </div>
  </scroll>
</template>

<script>
import { XButton } from 'vux'
import { car } from '../data'
let timer = null;
export default {
  components: { XButton },
  data: function () {
    return {
      driverState: '等待司机接单',
      driverStateText: '正在为您寻找车辆',
      driverStateDesc: '请等待其他司机师傅接单',
      loadWidth: parseInt(document.getElementsByTagName('body')[0].clientHeight / 3),
      time: false
    }
  },
  created () {
    this.getDriverState();
    let timeTotal = Number(store.get('CAR_CAR_TIME'));
    this.time = parseInt((Date.now() - timeTotal) / 1000);
    timer = setInterval(() => {
      this.time++
    }, 1000)
  },
  computed: {
    timeHandle () {
      if (!this.time) return false;
      let m = this.time / 60;
      let s = this.time % 60 > 0 ? this.time % 60 : 0;
      return `${parseInt((m < 0 ? 0 : m))}:${s < 10 ? '0' + s : s}`
    },
    loadWidthSly () {
      return {
        height: (this.loadWidth + 100) + 'px'
      }
    }
  },
  methods: {
    onClickCloseOrder () {
      let self = this;
      this.$vux.confirm.show({
        content: '是否确认取消订单',
        onConfirm () {
          car.cancelOrder({
            orderId: `${self.$route.params.orderId}`,
            reason: '任性',
            force: false
          }).then(res => {
            if (res.data.code === 0) {
              self.$router.push({
                path: `/carIndex/orderError/${self.$route.params.orderId}`,
                query: {
                  state: 0
                }
              })
            }
          })
        }
      })
    },
    // 轮询司机订单状态
    getDriverState () {
      car.receiveOrder({
        orderId: this.$route.params.orderId
      }).then(res => {
        if (res.data.code === 0) {
          this._handleDriverStateText(res.data.data.status);
        } else {
          this.$vux.toast.show({
            time: 3000,
            type: 'warn',
            text: res.data.msg,
            position: 'middle'
          });
          clearInterval(timer)
        }
      });
    },
    _handleDriverStateText (state) {
      switch (state) {
      case 'WAIT_REVIEVE' :
        this.driverState = '等待司机接单';
        this.driverStateText = '正在为您寻找车辆';
        setTimeout(() => {
          this.getDriverState()
        }, 5000);
        break;
        // 司机已接单页展示:
      case 'CONFIRM_ORDER' :
        this.$router.push(`/carIndex/orderDetail/${this.$route.params.orderId}`); break;
        // 司机已接单页展示:
      case 'DRIVER_CHANGE' :
        this.driverState = '司机因故取消，订单已改派';
        this.driverStateDesc = '请等待其他司机师傅接单';
        break;
        // 订单异常页展示:
        // 如果供应商推送订单状态信息为【接单失败】，页面跳转订单超时提示页
      case 'NO_ONE' :
        this.orderAbnormal(); break;
      case 'ORDER_ERROR' :
        this.orderAbnormal(); break;
      }
    },
    // 订单异常
    orderAbnormal () {
      this.$router.push({
        path: `/carIndex/orderError/${this.$route.params.orderId}`,
        query: {
          state: 1
        }
      })
    }
  },
  beforeRouteLeave (to, from, next) {
    clearInterval(timer);
    next()
  }
}
</script>

<style lang="stylus" type="text/stylus" scoped>
  @import "~assets/css/theme"
  .wait_order__container
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
    .order__group
      padding-top 20px
      padding-bottom 20px
      .cont
        background #fff
        border-radius 4px
        overflow hidden
        box-shadow 3px 3px 5px rgba(0, 0, 0, .2)
        p
          padding 2 * .61rem 0
          text-align center
          font-size $sl_font_size_16
          &:nth-child(1)
            border-bottom 1px #ddd solid
    h1
      text-align center
      padding 1 * .61rem 0
      font-size 2 * .61rem
    h5
      text-align center
      font-size $sl_font_size_default
      color $sl_font_color_desc
    .load-container
      position relative
      .time__cont
        position absolute
        left 50%
        top 45%
        transform translate(-50%, -50%)
        text-align center
        p
          font-size 1.5 * .61rem
          padding 1 * .61rem 0
          color $font_color_desc
        span
          font-size 4 * .61rem
          color #333c5c
    .close-btn
       color #fff
       padding-bottom 20px
</style>
